<template>
  <d2-container>
    <el-table :data="tableData" style="width: 100%" stripe size="mini" v-loading="loading">
      <el-table-column prop="areaName" label="小区名称">
      </el-table-column>
      <el-table-column prop="areaAddress" label="小区地址">
      </el-table-column>
      <el-table-column prop="areaManager" label="管理员">
      </el-table-column>
      <el-table-column prop="areaTel" label="联系方式">
      </el-table-column>
      
      <el-table-column align="right">
        <template slot="header" slot-scope="scope">
          <el-button type="primary" plain size="mini" @click="onAdd">新增</el-button>
        </template>
        <template slot-scope="scope">
          <el-button size="mini" type="success" plain @click="onUpdate(scope.row)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
    <template slot="footer">
       <el-pagination background  :page-size="page.size"   layout="prev, pager, next"
      :total="page.total"  @size-change="handleSizeChange" :current-page.sync="currentPage"  @current-change="handleCurrentChange">
    </el-pagination>
    </template>
    <dialogAreaModify ref="dialogAreaModify" @areachange="changarea"></dialogAreaModify>
  </d2-container>
</template>
<script>
import { mapActions } from 'vuex';
import { PAGE_SIZE } from "@/const"
export default {
  mounted() {
   this.bindData()
  },
  data() {
    return {
      currentPage:4,
      loading: false,
      tableData: [],
      page : {
        size:PAGE_SIZE,
        total:0,
        index:1
      },
    };
  },
  methods: {
    ...mapActions('pms/base.area', ['getPage']),
    onAdd() {
      this.$refs.dialogAreaModify.showDialog()
    },
    onUpdate(row) {
      this.$refs.dialogAreaModify.showDialog(row)
    },
    bindData(){
       this.loading = true
    this.getPage({page:this.page}).then(result => {
        //服务器请求成功,Result中存放的是请求的结果
        this.tableData = result.data;//把结果赋值给tableData
        this.page = result.page
        this.loading = false
      })
    },
    handleCurrentChange(){
    
    },
    handleSizeChange(val) {
      this.page.index=val
      this.bindData()
        
    },
    changarea(){
      this.bindData()
    }

  },
  components: {
    dialogAreaModify: () => import('./dialog-area-modify')
  }
};
</script>